<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<title>关于我们---页面管理</title>
<link rel="stylesheet" type="text/css" href="../layui/css/layui.css" />
<script src="../layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body class="layui-layout-body">
	<h3>设计师表</h3>
	<table id="demo2" lay-filter="test2" action="" method="post">
	</table>
	<script type="text/html" id="toolbarDemo1">
			<div class="layui-btn-container">
		    <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
		  </div>
		</script>
	<script type="text/html" id="toolbarDemo2">
			<div class="layui-btn-container">
		   
		    <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
		    <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
		  </div>
		</script>
	<!-- 设计师修改 -->
	<div id="updateDiv2" style="display: none;">
		<form class="layui-form" lay-filter="updateForm"
			action="AboutServletadmin?method=updatesheji" method="post">
			<div class="layui-form-item">
				<label class="layui-form-label">修改id</label>
				<div class="layui-input-inline">
					<input type="text" name="id" id="id" required lay-verify="required"
						placeholder="请输入标题" autocomplete="off"
						class="layui-input layui-disabled">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">名字</label>
				<div class="layui-input-inline">
					<input type="text" name="name" id="name" required
						lay-verify="required" placeholder="请输入标题" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">性别</label>
				<div class="layui-input-inline">
					<input type="radio" name="sex" id="sex" value="男" title="男">
					<input type="radio" name="sex" id="sex" value="女" title="女">

				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">职位</label>
				<div class="layui-input-inline">
					<input type="text" name="position" id="position" required
						lay-verify="required" placeholder="请输入标题" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">图片</label>
				<div class="layui-input-inline">
					<button type="button" name="url" class="layui-btn" id="tpsc">
						<i class="layui-icon">&#xe67c;</i>上传图片
					</button>
					<img id="showImg" src=" " width="100" /> <input type="text"
						name="url" id="url" required lay-verify="required"
						placeholder="请输入标题" autocomplete="off"
						class="layui-input Layui-disabled">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">修改时间</label>
				<div class="layui-input-inline">
					<input type="text" name="xiuTime" id="xiuTime" required
						lay-verify="required" placeholder="请输入标题" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<butto n class="layui-btn" lay-submit lay-filter="subBtn2">立即提交
					</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
	</div>
	<!--  添加设计师  -->
	<div id="updateDiv3" style="display: none;">
		<form class="layui-form" lay-filter="intsertForm" method="post">
			<!--  action="AboutServletadmin?method=intsertsheji" -->
			<div class="layui-form-item">
				<label class="layui-form-label">《添加》名字</label>
				<div class="layui-input-inline">
					<input type="text" id="name" name="name" required
						lay-verify="required" placeholder="请输入标题" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">性别</label>
				<div class="layui-input-inline">
					<input type="radio" name="sex" id="sex" value="男" title="男">
					<input type="radio" name="sex" id="sex" value="女" title="女">

				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">职位</label>
				<div class="layui-input-inline">
					<input type="text" id="position" name="position" required
						lay-verify="required" placeholder="请输入标题" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">图片</label>
				<div class="layui-input-inline">
					<button type="button" name="url" class="layui-btn" id="tpsc2">
						<i class="layui-icon">&#xe67c;</i>上传图片
					</button>
					<img id="showImg2" src=" " width="100" /> <input type="text"
						id="url2" name="url2" required lay-verify="required"
						placeholder="请输入标题" autocomplete="off"
						class="layui-input Layui-disabled">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">时间</label>
				<div class="layui-input-inline">
					<input type="text" name="xiuTime2" id="xiuTime2" placeholder="请选择"
						autocomplete="off" class="layui-input" id="insertTime">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="subBtn3">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
	</div>

	<script>
		layui.use([ 'table', 'form', 'upload', 'layer', 'laydate' ],
				function() {
					var table = layui.table;
					var layer = layui.layer;
					var form = layui.form;
					var laydate = layui.laydate;
					var upload = layui.upload;
					var $ = layui.$;
					table.render({
						elem : '#demo2',
						url : 'AboutServletadmin?method=dosheji' //数据接口
						,
						toolbar : '#toolbarDemo1',
						id : "sheji",
						page : true //开启分页
						,
						method : "post",
						cols : [ [ //表头
						{
							field : 'id',
							title : 'id',
							width : 80
						}, {
							field : 'name',
							title : 'name',
							width : 80
						}, {
							field : 'sex',
							title : 'sex',
							width : 150
						}, {
							field : 'position',
							title : '字段3',
							width : 150
						}, {
							field : 'url',
							title : '字段3',
							width : 150,
							templet : function(d) {
								return '<img src="../'+d.url+'"/>'
							}
						}, {
							field : 'xiuTime',
							title : '字段3',
							width : 150
						}, {
							title : '操作',
							toolbar : '#toolbarDemo2'
						}

						] ]
					});
					//监听设计师头部工具栏
					table.on('toolbar(test2)', function(obj) {
						switch (obj.event) {
						case 'add':
							layer.open({
								type : 1,
								btnAlign : 'c',
								area : [ '500px', '600px' ],
								content : $('#updateDiv3')
							});
							form.val("intsertForm", data);
							$("#showImg2").attr("src", "../" + data.url2)
							break;

						}
						;
					});

					//监听行内设计师表
					table.on('tool(test2)', function(obj) {
						var data = obj.data;
						switch (obj.event) {
						case 'delete':
							layer.confirm('真的删除么', function(index) {
								obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
								layer.close(index);//向服务端发送删除指令
								$.post("AboutServletadmin?method=deletesheji",
										{
											"id" : data.id
										}, function(res) {
											layer.msg(res.msg);
										}, "json")
							});
							break;
						case 'update':

							layer.open({
								type : 1,
								area : [ '500px', '600px' ],
								content : $('#updateDiv2')
							});
							form.val("updateForm", data);
							$("#showImg").attr("src", "../" + data.url)

							break;
						}
						;
					});
					//时间日期选择器
					laydate.render({
						elem : '#xiuTime',
						type : 'datetime'
					});
					laydate.render({
						elem : '#xiuTime2',
						type : 'datetime'
					});
					form.on('submit(subBtn3)', function(data) {
						$.post("AboutServletadmin?method=intsertsheji",
								data.field, function(res) {
									console.log(res);
									if (res.code == 0) {
										layer.msg(res.msg, {
											time : 1000
										}, function() {
											layer.closeAll();
											table.reload("sheji", {});
										})
									}
								}, "json")
						return false;
					});
					form.on('submit(subBtn2)', function(data) {
						$.post("AboutServletadmin?method=updatesheji",
								data.field, function(res) {
									console.log(res);
									if (res.code == 0) {
										layer.msg(res.msg, {
											time : 1000
										}, function() {
											layer.closeAll();
											table.reload("sheji", {});
										})
									}
								}, "json")
						return false;
					});

					var uploadInst = upload.render({
						elem : '#tpsc',//绑定元素
						url : 'AboutServletadmin?method=uploadImg', //上传接口
						done : function(res) {
							//上传完毕回调
							console.log(res);
							if (res.code == 0) {
								$("#showImg").attr("src",
										"../images/" + res.data);
								$("#url").val("images/" + res.data);
							}

						},
						error : function() {
							//请求异常回调
						}
					});
					var uploadInst = upload.render({
						elem : '#tpsc2',//绑定元素
						url : 'AboutServletadmin?method=uploadImg', //上传接口
						done : function(res) {
							//上传完毕回调
							console.log(res);
							if (res.code == 0) {
								$("#showImg2").attr("src",
										"../images/" + res.data);
								$("#url2").val("images/" + res.data);
							}

						},
						error : function() {
							//请求异常回调
						}
					});

				});
	</script>
</body>
</html>